<template>
  <div class="index">
    <!-- 顶部导航 -->
    <header><marquee>欢迎来到洞庭湖讲师机旁边的一群小可爱的后台管理系统</marquee></header>
    
    <!-- <div class="container"> -->
      <div class="count">
        <!-- 侧边栏 -->
        <el-row class="tac">
          <div class="administrator">
            <img src="../assets/images/tx.jpg" alt />
          </div>
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              active-text-color="#789938"
            >
              <!-- 网站管理员 -->
              <el-submenu index="1">
                <template slot="title">
                  <!-- <i class="el-icon-document"></i> -->
                  <span>网站管理员</span>
                </template>
                <el-menu-item-group>
                  <router-link to=" ">
                    <el-menu-item index="1-1">
                      <i class="el-icon-s-custom"></i>
                      个人资料
                    </el-menu-item>
                  </router-link>
                  <router-link to=" ">
                    <el-menu-item index="1-2">
                      <i class="el-icon-s-tools"></i>
                      修改密码
                    </el-menu-item>
                  </router-link>
                  <router-link to=" ">
                    <el-menu-item index="1-3">
                      <i class="el-icon-refresh"></i>
                      退出登录
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <!-- 系统管理 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>系统管理</span>
                </template>
                <el-menu-item-group>
                  <router-link to="users">
                    <el-menu-item index="2-1">用户管理</el-menu-item>
                  </router-link>
                  <router-link to="roleManagement">
                    <el-menu-item index="2-3">角色管理</el-menu-item>
                  </router-link>
                  <router-link to="division">
                    <el-menu-item index="2-2">部门管理</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <!-- 消息管理 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-message"></i>
                  <span>消息管理</span>
                </template>
                <el-menu-item-group>
                  <router-link to="msnmodel">
                    <el-menu-item index="3-1">消息模板</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <!-- 运维管理 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>运维管理</span>
                </template>
                <el-menu-item-group>
                  <router-link to="business">
                    <el-menu-item index="4-1">业务日志</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <!-- 各页面路由 -->
      <div class="i-right">
        <router-view></router-view>
      </div>
    <!-- </div> -->
  </div>
</template>

<script type="text/ecmascript-6">
// import "@/assets/css/app.min.1.css";
export default {
  name: "",
  data() {
    return {};
  },
  components: {},
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
};
</script>


<style lang="stylus" scoped>
.index {
  height: 100%;
}

header {
  line-height: 41px;
  background-color: #2196f3;
  text-align center
  color #ffffff
  font-size 30px
}

body {
  heigth: 100%;
}

.el-row >>> .el-col {
  width: 220px;
}

.count {
  height: 100%;
  background-color: #fff;
  width: 220px;
  position: fixed;
  bottom: 0;
  top: 50px;
}
.administrator {
  height: 100px;
  background: url('../assets/images/back.jpg') no-repeat;
  background-position: -5px -100px;

  img {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.14);
    box-sizing: content-box;
  }
}
.i-right{
  position fixed
  right 0
  bottom 0
  top 65px
  left 220px
  padding 0 15px
}

</style>

